<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2>1. 双大括号表达式</h2>
			<p>{{msg}}</p> <!-- textContent -->
			<p>{{msg.toUpperCase()}}</p>
			<p v-text="msg"></p> <!-- textContent -->
			<p v-html="msg"></p> <!-- innerHTML -->
		
			<h2>2. 指令一:强制数据绑定</h2>
			<img v-bind:src="imgUrl" />
			<img :src="imgUrl" />
			
			<h2>3. 指令二:绑定事件监听</h2>
			<button v-on:click="test">test</button>
			<button @click="test">test</button>
			<button @click="test2('abc')">test2</button>
			<button @click="test2(msg)">test2</button>
		</div>
		<script type="text/javascript" src="js/vue.js"></script>
		<script>
			new Vue({
				el: "#app",
				data: {
					msg: "<a href='http://39.108.121.57:8080'>www.xchch.com</a>",
					imgUrl: "https://cn.vuejs.org/images/logo.png"
				},
				methods: {
					test(){
						alert("hehe!")
					},
					test2(content){
						alert(content)
					}
				}
			})
		</script>
	</body>
</html>
